<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" id="vp" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<title>童圈</title> 
		<link href="../../css/style.css" rel="stylesheet" type="text/css">
		<link href="../../css/mui.css" rel="stylesheet" type="text/css">
		<style>
			#inputa{
				position: absolute;
				bottom: -0.1rem;
				height: 0.7rem; 
				line-height: 0.4rem!important;
			}
		</style>
	</head>
	<body>
		<div id="children" class="msgdetail">
			<!--消息列表-->
			<div class="list-frame" id="list">
				<ul class="list-info">
					<template v-for="(item,index) in items" :key="index">
						<li class="list-info-li">
							<div class="main clearfix">
								<div :style="{backgroundImage:'url(' + item.member_avatar + ')'}" class="people-l fl"></div>
								<!--img :src="item.member_avatar" class="people-l fl" /-->
								<div class="list-info-li-r fl">
									<div class="name posir">
										<div class="name-text">{{item.member_name}}</div>
									</div>
									<!--消息内容-->
									<div class="text-info">
										<p class="text overhide word-long fold">{{item.content}}</p>
										<p class="all" v-if="item.content.length>95" @click='handleFold($event)' onclick="javascript:this.innerHTML=(this.innerHTML=='全文'?'收起':'全文');">全文</p>
									</div>
									<!--1.单图2.多图3.视频4.图文5.其他-->
									<div class="list-info-pic" v-if="item.type==1">
										<img :src="item.message_image" class="imgWidth" @tap="previewimg(item.message_image,0)" />
									</div>
									<div class="list-info-pic clearfix" v-if="item.type==2">
										<div :style="{backgroundImage:'url(' + pic + ')'}" class="list-ip-img2 list-info-picBackground fl" v-for="(pic,index) in item.message_image" @tap="previewimg(item.message_image,index)">
											<!--img :src="pic" class="list-ip-img2 fl" v-for="(pic,index) in item.message_image" @tap="previewimg(item.message_image,index)"/-->
										</div>
									</div>
									<div class="clearfix clearfixvideo" v-if="item.type==3"> 
										<video :src="item.video" class="videoWidth" :poster="item.videoimg" type="video/mp4">
										</video>
										<div class="playbtn"><img src="../../images/play.png"/></div> 
									</div>
									<div class="list-info-li-tuwen clearfix" v-if="item.type==4" @tap="open_detail(item.link,item.title)">
										<div class="list-info-li-tuwenBackground" :style="{backgroundImage:'url(' + item.pic + ')'}"></div>
										<!--img :src="item.pic" /-->
										<div class="list-info-li-tuwenContent fl"><div><span :class="item.title.length>18 ? 'p1' : 'p2' ">{{item.title}}</span></div></div>
									</div>
									<div class="list-info-pic clearfix" v-if="item.type==5">
									</div>
									<!--操作按钮-->
									<div class="fabulous clearfix">
										<div class="text fl">{{item.ftime}}</div>
									</div>
									<div class="pinglun"> 
									<div class="dianzan" v-if="item.upvote_count!=0">
										<img src="../../images/icon/xin_3.png" class="xintu fl"/>
										<div class="zannameBox"><span v-for="(zan,index) in item.upvote">{{zan.member_name}}<span  v-if="index<item.upvote_count-1">,</span></span></div>
										<div class="clear"></div>
										<div class="zancounta" v-if="item.upvote_count>5">{{item.upvote_count}}人觉得很赞</div>  
										<div class="clear"></div>
									</div>
									<div class="pinglunCo">
										<div class="pinglunBoxb" v-for="comment in item.comment">  
											<span class="pinglunname">{{comment.member_name}}</span>
											<span class="maohao">:</span> 
											<span class="pinglunCoten">{{comment.comment_content}}</span>
											<span v-if="comment.member_id==item.uid" class="delComment" @tap="delcomment(item,comment)">删除</span>
											<div class="clear"></div>
										</div>
									</div>
									<div class="clear"></div>
								</div>
								</div>
							</div>
						</li>
						<div id="inputBox"><textarea type="text" placeholder="评论" id="inputa" @tap="focusa()" /></textarea><button id="sendBtn" @tap="sendComment(item)">发送</button></div>
					</template>
				</ul>
			</div>
		</div>
		<!--轮播banner-->
		<script src="../../js/mui.js"></script>
		<script src="../../js/vue.min.js"></script>
		<script src="../../js/app.js"></script>
		<script src="../../js/token.js"></script>
		<script src="../../js/iconfont.js"></script>
		<script type="text/javascript" src="../../js/jquery-1.8.3.min.js"></script>
		<script>
			
			//停止播放
			function pause(){
				for(var i=0;i<$('.videoWidth').length;i++){
						$('.videoWidth')[i].pause();
						$('.playbtn')[i].style.display='block';
					}
			}
			var firstid = ''; //最旧的msg id，用于上拉加载
			var lastid = ''; //最新的msg id，用于下拉刷新
			var favoritestatus = 0; //收藏按钮状态，避免快速点击 
			var state = app.getState();
			var memberToken=state.memberToken
			//mui初始化，配置下拉刷新
			mui.init({
				pullRefresh: {
					container: '#list',
					down: {
						style: 'circle',
						offset: '0px',
						auto: true,
						callback: pulldownRefresh
					}
				}
			});
			mui.plusReady(function() {
				
				mui('#list').on('tap','.playbtn',function(){
					pause(); 
					this.previousElementSibling.play();
					this.style.display='none';
					this.previousElementSibling.addEventListener('ended',function(){
							this.nextElementSibling.style.display='block';
						})
				})
				mui('#list').on('tap','.videoWidth',function(){
					this.pause();
					this.nextElementSibling.style.display='block';
				})
				
			});

			var children = new Vue({
				el: '#children',
				data: {
					banners: [], //顶部banner数据
					items: [], //列表信息流数据
					fold: true,
					clickTf: true,
					activeindex: 0
				},
				methods: {
					//删除评论
						delcomment: function(item,comment) {
							  
							var data = {
								uid: state.userid,
								id: comment.comment_id,
								memberToken: memberToken
							};
							that = this;
							var btnArray = ['否', '是'];
							mui.confirm('您是否要删除该条评论？', '删除确认', btnArray, function(e) {
								if(e.index == 1) {
									mui.post(Apiurl+'index/delcomment', data, function(res) {
										if(res.status == "200") {
											var self = plus.webview.currentWebview();
											var messageid=self.messageid;
											mui.fire(plus.webview.getWebviewById('moments'),'refreshmomentcomment',{
												msgid:messageid
											})
											item.comment = res.comment;
											console.log(JSON.stringify(res.comment)); 
											plus.nativeUI.toast('删除成功', {
												verticalAlign: 'middle'
											});
										}
									}, 'json');
								}
							})
						},
						focusa: function(){
							document.body.scrollTop = document.body.scrollHeight;
							
							var taVal = document.getElementById('inputa').value;
    
    
						},
					//图片预览
					previewimg: function(item, index) {
						var urls = [];
						item.forEach(function(img) {
							urls.push(img);
						});

						plus.nativeUI.previewImage(urls, {
							current: index,
							loop: true,
							indicator: 'number'
						});
					},
					//全文/收起
					handleFold: function(e) {
						if(e.srcElement.previousElementSibling.getAttribute('class') == 'text overhide word-long fold') {
							e.srcElement.previousElementSibling.setAttribute('class', 'text overhide word-long unfold')
						} else {
							e.srcElement.previousElementSibling.setAttribute('class', 'text overhide word-long fold')
						}

					},
					//评论
					sendComment: function(item){
						
						var commentvalue = document.getElementById("inputa").value;
								if(commentvalue.trim()=="") return;
								if(commentvalue.length>200){
									alert('请评论小于200个字数');
										document.getElementById('inputBox').style.display = 'block';
										document.getElementById("inputa").value=commentvalue;
										document.getElementById('inputa').focus();
								}else{
									document.getElementById("inputa").value='';
									mui.post(Apiurl+'index/comment', {
									uid: state.userid,
									id: item.id,
									content: commentvalue,
									memberToken: memberToken
								}, function(data) {
									if(data.status == 200) {
										plus.nativeUI.toast('评论成功', {
											verticalAlign: 'middle'
										});
										for(var i = 0; i < children.items.length; i++) {
											var self = plus.webview.currentWebview();
											var messageid=self.messageid; 
											mui.fire(plus.webview.getWebviewById('moments'),'refreshmomentcomment',{
												msgid:messageid 
											})
											if(children.items[i].id == item.id) { 
												children.items[i].comment = data.comment;
												children.items[i].comment_count = data.comment_count; 
												children.items[i].comment_content = data.comment_content; 
											}
										} 
			
									}else if(data.status==404){
										plus.nativeUI.toast('您的输入包含敏感词汇', {
											verticalAlign: 'middle'
										});
									}else if(data.status==405){
										plus.nativeUI.toast('评论异常', {
											verticalAlign: 'middle'
										});
									}
								}, 'json')
								}
					}
				}
			});
			
			//下拉刷新
			function pulldownRefresh() {
				if(window.plus && plus.networkinfo.getCurrentType() === plus.networkinfo.CONNECTION_NONE) {
					plus.nativeUI.toast('似乎已断开与互联网的连接', { 
						verticalAlign: 'top'
					});
					return; 
				}
				var self = plus.webview.currentWebview();
				var messageid=self.messageid;
				var data = {
					uid: state.userid,
					id:messageid,
					memberToken: memberToken
				};
				if(lastid) { //说明已有数据，目前处于下拉刷新，增加时间戳，触发服务端立即刷新，返回最新数据
					data.lastid = lastid;
				}
				//获取消息列表
				mui.post(Apiurl+'index/message_info', data, function(data) {
					mui('#list').pullRefresh().endPulldownToRefresh();
					if(data.message && data.message.length > 0) {
						lastid = data.message[0].fav_id;
						if(!firstid) { //首次拉取列表时保存最后一条消息的id，方便上拉加载时使用
							firstid = data.message[data.message.length - 1].fav_id;//注意，取fav_id
						}
						children.items = convert(data.message);
						var parentPage = plus.webview.getWebviewById('moments');
						mui.fire(parentPage,'refreshcomment',{
						    msgid:messageid 
					    });
					}
				}, 'json');
			}
			//打开微信文章详情
			function open_detail(url, title) {
				mui.openWindow({
					url: url,
					id: 'ad_detail',
					styles: {
						"render": "always",
						"popGesture": "hide",
						"bounce": "vertical",
						"bounceBackground": "#efeff4",
						"titleNView": titleNView = { //详情页原生导航配置
							autoBackButton: true, //自动绘制返回箭头
							backgroundColor: '#25aae3', //导航栏背景色
							titleText: title, //导航栏标题
							titleColor: '#F7F7F7', //文字颜色
							//coverage:"120px",
							//type: 'transparent', //透明渐变样式
							splitLine: { //底部分割线
								color: '#cccccc'
							}
						}
					}
				});
			}
			/**
			 * 1、将服务端返回数据，转换成前端需要的格式
			 * 2、若服务端返回格式和前端所需格式相同，则不需要改功能
			 * 
			 * @param {Array} items 
			 */
			function convert(items) {
				var newItems = [];
				items.forEach(function(item) {
					newItems.push({
						uid: state.userid,
						id: item.id,
						member_avatar: item.member_avatar,
						member_name: item.member_name,
						member_id: item.member_id,
						message_image: item.message_image,
						pic: item.pic,
						title: item.title,
						content: item.content,
						link: item.link,
						coll: item.coll,
						type: item.type,
						ftime: item.ftime,
						upvote_count:item.upvote_count,
						upvote:item.upvote,
						upvote_status:item.upvote_status,
						comment:item.comment,
						video:item.video,
						comment_count:item.comment_count,
						videoimg:item.videoimg
					});
				});
				return newItems;
			}
			//处理返回键
			var backButtonPress = 0; 
			var old_back = mui.back;
			mui.back = function(event) {
				var ws = plus.webview.currentWebview() 
				if(ws) {
					ws.close();
				}else {
					backButtonPress++;
					if(backButtonPress > 1) {
						plus.runtime.quit();
					} else {
					}
					setTimeout(function() {
						backButtonPress = 0;
					}, 1000);
					return false;
				}
			};
		</script>
	</body>

</html>